﻿@page "/PullToRefresh"
@using FluentUI.Demo.Shared.Pages.PullToRefresh.Examples

<PageTitle>@App.PageTitle("PullToRefresh")</PageTitle>

<h1>PullToRefresh</h1>

<p>
    The <b>Pull-to-refresh</b> is a touchscreen gesture. It involves touching the screen of a computing device with a finger
    or pressing a button on a pointing device, dragging the screen downward, and then releasing it.
    This action signals the application to refresh the contents of the component.
    Its purpose is to make refreshing immediately accessible and to save valuable screen space that would otherwise be occupied by a refresh button.
</p>

<p>
    These features are mainly used on mobile devices. To maintain compatibility with the majority of <b>desktop browsers</b>, an emulator script is included
    and loaded automatically by the component.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="typeof(PullDownBasic)"></DemoSection>

<DemoSection Title="Pull down" Component="typeof(PullDownDefault)">
    <Description>
        With the default settings, the component uses icons for starting and update 'tips'. These can be replaced by using the <code>...Template</code> parameters.
        In this example we are using plain text templates. Also the the inital tip template is hidden until a pull to refresh action is actually started and hidden once an update is finshed.
        The timeout of the update message can be changed.
    </Description>
</DemoSection>

<DemoSection Title="Pull up" Component="typeof(PullUpDefault)">
    <Description>
        This demo has a height set for the 'pull up tip'. Also, the distance the tip has to be pullud has been increased.

        Instead of using a progress ring, this one shows a progress bar. The maximum number of
        items that can be shown is set to 100, so the number of 'pull up's' is limited to 4.</Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentPullToRefresh)" />
